<template>
    <div class="food-item" @click="$router.push({name:'FoodDetail',query:{fid:f_item.id}})">
        <div class="left-img">
            <slot>
                <img v-lazy="f_item.food_img" @click.stop="showThisImage">
            </slot>
        </div>
        <ul class="right-text">
            <li class="food_name">{{f_item.food_name}} </li>
            <li class="sale-count">月售:{{f_item.saleCount}} </li>
            <li class="price">价格:{{f_item.price}} </li>
        </ul>
    </div>
</template>

<script>

import { ImagePreview } from 'vant';
import { useStore } from 'vuex';
export default {
    name:"FoodItem",
    props:['f_item'],
    components:{ImagePreview},
    setup (props,context) {
        //点击图片预览
        function showThisImage(){
            ImagePreview([props.f_item.food_img]);
        }
        const store=useStore();
        //长按拉起sheet
        function showActiveSheet(){
            store.commit("showActionSheet",{
                list:['详情','收藏',"取消"],
                successCallBack:function(index){
                    if(index==0){
                        console.log("111")
                    }else if(index==1){
                        console.log("222")

                    }else if(index==2){
                        console.log("333")
                    }
                }
            })
        }

        return {showThisImage,showActiveSheet}
    }
}
</script>

<style lang="scss" scoped>

.food-item{
    display: flex;
    height: 90px;
    border-bottom: 1px solid lightgrey;
    padding: 2px 5px;
    .left-img{
        width: 110px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .right-text {
        flex: 1;
        font-size: 12px;
        margin-left: 5px;
        @include flexbox(column, space-between,flex-start);
        .food_name{
            font-weight: bold;
            font-size: 20px;
        }
        .sale-count{
            color: red;
        }
        .sprice{

        }
    }
    
}

</style>